<template>
  <div class="layoutlist">
    <el-form ref="form" :model="form" label-position="top" class="myform">
      <el-form-item label="成品加工单编码" class="myform-item">
        <div style="display: flex">
          <el-input
            v-model="form.processing_code"
            placeholder="请输入成品加工单"
            @keyup.enter.native="onSearch"
            clearable
            style="width: 400px; margin-right: 20px"
          ></el-input>
          <el-button type="primary" size="default" @click="onSearch"
            >查询</el-button
          >
        </div>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border stripe style="margin-top: 10px">
      <el-table-column
        prop="processing_code"
        label="成品加工单编码"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="overflow" label="溢装比" align="center">
        <template slot-scope="{ row }">
          {{ Number(row.overflow) * 100 }}%
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button type="text" size="default" @click="onEdit(row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postGetprocessing_list"
    />
    <el-input v-model="codeValue" placeholder="请输入条形码" />
    <el-dialog
      title="修改"
      :visible.sync="dialogFormVisible"
      width="800px"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <el-form
        :model="form"
        ref="form"
        label-position="left"
        label-width="100px"
      >
        <div style="display: flex; padding-bottom: 30px">
          <div style="margin-right: 30px">
            成品加工单编码：{{ data.processing_code }}
          </div>
          <div>原溢装比：{{ Number(data.overflow) * 100 }}%</div>
        </div>
        <el-form-item label="修改溢装比:" prop="title">
          <el-input
            v-model="overflow"
            placeholder="请输入溢装比"
            type="number"
            style="width: 200px"
          >
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="default"
            @click="onCreation"
            :loading="loading"
            >修改</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { postGetprocessing_list, postSetoverflow } from "@/api";
import pagination from "@/components/pagination.vue";
export default {
  components: {
    pagination,
  },
  data() {
    return {
      dialogFormVisible: false,
      loading: false,
      data: {},
      overflow: "",
      total: 0,
      form: {
        processing_code: "",
        page: 1,
        size: 10,
      },
      tableData: [],
      codeValue: "",
      code: "",
      lastTime: "",
      nextTime: "",
      lastCode: "",
      nextCode: "",
      dtmainId: "",
    };
  },
  activated() {
    let form = this.form;
    this.postGetprocessing_list(form);
  },
  created() {
    window.document.onkeypress = (e) => {
      if (window.event) {
        // IE
        this.nextCode = e.keyCode;
      } else if (e.which) {
        // Netscape/Firefox/Opera
        this.nextCode = e.which;
      }

      if (e.which === 13) {
        // 键盘回车事件
        if (this.code.length < 3) return; // 扫码枪的速度很快，手动输入的时间不会让code的长度大于2，所以这里不会对扫码枪有效
        console.log("扫码结束。");
        console.log("条形码：", this.code);
        this.parseQRCode(this.code); // 获取到扫码枪输入的内容，做别的操作
        this.lastCode = "";
        this.lastTime = "";
        return;
      }

      this.nextTime = new Date().getTime();
      if (!this.lastTime && !this.lastCode) {
        this.code = ""; // 清空上次的条形码
        this.code += e.key;
        console.log("扫码开始---", this.code);
      }
      if (
        this.lastCode &&
        this.lastTime &&
        this.nextTime - this.lastTime > 500
      ) {
        // 当扫码前有keypress事件时,防止首字缺失
        this.code = e.key;
        console.log("防止首字缺失。。。", this.code);
      } else if (this.lastCode && this.lastTime) {
        this.code += e.key;
        console.log("扫码中。。。", this.code);
      }
      this.lastCode = this.nextCode;
      this.lastTime = this.nextTime;
    };
  },
  methods: {
    parseQRCode(code) {
      if (code.length === 13) {
        // 处理自己的逻辑
        this.$emit("barCode", code); //通知父组件
      } else if (code.length === 23) {
        console.log("B类条码:" + code);
      } else if (code.length === 0) {
        console.log("请输入条码！");
      } else {
        alert("条码不合法：" + code);
      }
      this.codeValue = code;
    },

    // 品类列表
    postGetprocessing_list(form) {
      this.form = form;
      postGetprocessing_list(form).then((res) => {
        console.log("品类列表", res);
        this.tableData = res.data;
        this.total = res.total;
      });
    },
    closeDialog() {
      this.data = {};
    },

    // 编辑
    onEdit(e) {
      this.data = e;
      this.dialogFormVisible = true;
    },
    // 查询
    onSearch() {
      let form = this.form;
      this.postGetprocessing_list(form);
    },
    // 修改溢装比
    onCreation() {
      this.loading = true;
      let overflow = this.overflow;
      if (overflow != "") {
        let obj = {
          overflow,
          processing_code: this.data.processing_code,
        };
        postSetoverflow(obj)
          .then((res) => {
            console.log("修改溢装比", res);
            this.$message.success("成功修改溢装比！");
            this.postGetprocessing_list(this.form);
            this.loading = false;
            this.dialogFormVisible = false;
            this.data = {};
          })
          .catch((err) => {
            console.log("err", err);
            this.$message.warning(err.msg);
            this.loading = false;
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.layoutlist {
  @include global-back;
}
</style>